import React, { useState, useEffect } from 'react';
import { ls } from '../https/index';
import './Shu.css'
function Shu() {
    const [list, setList] = useState([]);
    const getList = async () => {
        const res = await ls();
        setList(res.data.list);
    };
    useEffect(() => {
        getList();
    }, []);

    return (
        <div className="product-container">
            <div className="section-title">推荐商品</div>
            <div className="products-grid">
                {list.map((product) => (
                    <div key={product._id} className="product-card">
                        <div className="product-image-container">
                            <img src={product.image}  className="product-image" />
                        </div>
                        <div className="product-info">
                            <h3 className="product-name">{product.name}</h3>
                            <div className="product-price">¥{product.price}</div>
                            <div className="product-desc">{product.description}</div>
                            <div className="product-sales">{product.sales}</div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}

export default Shu;